import React, { Component } from "react";
import { connect } from "react-redux";
import { Table, Button, Space, Modal, Form, Input } from "antd";
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 14,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 14,
  },
};
class Account extends Component {
  columns = [
    {
      title: "账户种类",
      dataIndex: "accountCateName",
    },
    {
      title: "金额",
      dataIndex: "balance",
    },
    {
      title: "状态",
      dataIndex: "freeze",
      render: (e) => (e ? "冻结" : "正常"),
    },
    {
      title: "操作",
      dataIndex: "",
      render: (e) => (
        <Space>
          <Button
            size="small"
            type="primary"
            onClick={() => {
              this.rechargeClick(e);
            }}
          >
            充值
          </Button>
          <Button
            size="small"
            type="primary"
            onClick={() => {
              this.freezeClick(e);
            }}
          >
            {e.freeze ? "解除" : "冻结"}
          </Button>
        </Space>
      ),
    },
  ];
  state = {
    multiData: [],
    selectedItem: null,
    showModal: false,
    showEditModal: false,
  };
  returnBack = () => {
    this.props.history.replace("/user");
  };
  rechargeClick = (e) => {
    this.setState({
      showEditModal: true,
      selectedItem: e,
    });
  };
  freezeClick = (e) => {
    this.setState({
      showModal: true,
      selectedItem: e,
    });
  };
  handleRecharge = async (e) => {
    // console.log({
    //   accountId: this.state.selectedItem.id,
    //   cate: this.state.selectedItem.accountCate,
    //   operator: this.props.userInfo.id,
    //   money: e.money,
    //   orderId: e.orderId,
    // });
    // return;
    this.setState({
      loading: true,
      showEditModal: false,
    });
    await this.http(
      "Account/BackCharge",
      {
        accountId: this.state.selectedItem.id,
        cate: this.state.selectedItem.accountCate,
        operator: this.props.userInfo.id,
        money: e.money,
        orderId: e.orderId,
      },
      "POST",
      true
    );
    this.setState({
      loading: false,
      selectedItem: null,
    });
    this.getData();
  };
  handleFreeze = async () => {
    this.setState({
      loading: true,
      showModal: false,
    });
    await this.http(
      "account",
      {
        ...this.state.selectedItem,
        freeze: !this.state.selectedItem.freeze,
      },
      "POST",
      true
    );
    this.setState({
      loading: false,
      selectedItem: null,
    });
    this.getData();
  };
  getData = async () => {
    this.setState({
      loading: true,
    });
    const res = await this.http("Account", {
      userId: this.props.match.params.id,
    });
    this.setState({
      loading: false,
      multiData: res.data.dtos,
    });
  };
  componentDidMount() {
    this.getData();
  }
  render() {
    return (
      <div>
        <Button className="header" onClick={this.returnBack} type="primary">
          返回
        </Button>
        <Modal
          visible={this.state.showModal}
          onOk={this.handleFreeze}
          onCancel={() => {
            this.setState({ showModal: false, selectedItem: null });
          }}
        >
          确定冻结吗？
        </Modal>
        <Modal
          visible={this.state.showEditModal}
          onCancel={() => {
            this.setState({ showEditModal: false, selectedItem: null });
          }}
          footer={[null, null]}
        >
          <Form
            {...layout}
            name="basic"
            onFinish={this.handleRecharge}
            onFinishFailed={this.onFinishFailed}
          >
            <Form.Item
              label="充值金额"
              name="money"
              rules={[
                {
                  required: true,
                  message: "充值金额不可为空！",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="公链订单id"
              name="orderId"
              // rules={[
              //   {
              //     required: true,
              //     message: "充值金额不可为空！",
              //   },
              // ]}
            >
              <Input />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button
                loading={this.state.submitLoading}
                type="primary"
                htmlType="submit"
              >
                提交
              </Button>
            </Form.Item>
          </Form>
        </Modal>
        <Table
          rowKey={(data) => data.id}
          loading={this.state.loading}
          columns={this.columns}
          dataSource={this.state.multiData}
        />
      </div>
    );
  }
}
export default connect((state) => ({ userInfo: state.user }), {})(Account);
